import "./index.css"
import {
    Button,
    Checkbox,
    Form,
    Input,
    Typography,
    Spin,
    Flex,
    message
} from 'antd';
import {
    UserOutlined,
    LockOutlined,
    EyeInvisibleOutlined,
    EyeTwoTone
} from '@ant-design/icons';

import { useEffect, useState } from "react";
import { loginAsync } from "../../store/modules/login";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";


const { Title, Text } = Typography;

export const Login = () => {
    const [account, set_account] = useState("");
    const [password, set_password] = useState("");
    const [loading, set_loading] = useState(false);
    const navigate = useNavigate();
    const [remember, set_remember] = useState(true);
    const dispatch = useDispatch();
    const config=window.APP_Config;

    // 定义输入框高度样式
    const inputStyle = {
        height: '50px', // 增加高度，默认约为32px
        fontSize: '16px' // 可选：适当增大字体以匹配高度
    };

    useEffect(()=>{
        sessionStorage.removeItem("defaultOpenKeys");
        sessionStorage.removeItem("defaultSelectedKeys");
    },[])

    return (
        <div className="login-container">
            {/* <Spin tip="Loading..." spinning={loading} fullscreen /> */}

            {/* 登录卡片 */}
            <div className="login-card">
                {/* 标题区域 */}
                <Title level={3} style={{ color: "#3B82F6", textAlign: 'center', marginBottom: 20, fontSize: "40px" }}>
                    本草轩理疗坊
                </Title>


                {/* 表单 */}
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{
                        account: sessionStorage.getItem("account"), // 默认账号
                        password: sessionStorage.getItem("password"), // 默认密码
                        remember: remember
                    }}
                    onFinish={async (values) => {
                        set_loading(true);
                        const res = await dispatch(loginAsync({ account: values.account, password: values.password }));
                        if (res.code == 0) {
                            //登录成功
                            if (remember) {
                                sessionStorage.setItem("account", account);
                                sessionStorage.setItem("password", password);
                            } else {
                                sessionStorage.removeItem("account");
                                sessionStorage.removeItem("password");
                            }
                            set_loading(false);
                            message.success(res.message);
                            navigate(config.home)
                        } else {
                            set_loading(false);
                            message.error(res.message)
                        }

                    }}
                >
                    <Form.Item
                        name="account"
                        rules={[{ required: true, message: '请输入账号！' }]}
                    >
                        <Input
                            prefix={<UserOutlined className="site-form-item-icon" />}
                            placeholder="请输入账号"
                            style={inputStyle}  // 应用高度样式
                            maxLength={11}
                            onChange={e => {
                                set_account(e.target.value)
                            }}
                        />
                    </Form.Item>

                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: '请输入密码！' }]}
                    >
                        <Input.Password
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            placeholder="请输入密码"
                            style={inputStyle}  // 应用高度样式
                            onChange={e => { set_password(e.target.value) }}
                            iconRender={(visible) => (
                                visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
                            )}
                        />
                    </Form.Item>

                    <Form.Item>
                        <Flex justify="space-between" align="center">
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox onChange={e => {
                                    set_remember(e.target.checked)
                                }}>记住密码</Checkbox>
                            </Form.Item>
                            <a href="#">忘记密码?</a>
                        </Flex>
                    </Form.Item>

                    <Form.Item>
                        <Button
                            type="primary"
                            htmlType="submit"
                            className="login-form-button"
                            block
                            style={{ height: '50px', fontSize: '16px' }}  // 保持按钮与输入框高度一致
                        >
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
};
